@use "sass:math";

.DataPageContent__grapher-for-embed {
    display: none;
}

.DataPageContent {
    .header__wrapper {
        padding-top: 24px;

        @include sm-up {
            padding-top: 48px;
            padding-bottom: 0;
        }
    }

    .header__left {
        margin-bottom: 16px;

        @include sm-up {
            margin-bottom: 40px;
        }
    }

    .bg-blue-10 {
        background-color: $blue-10;
    }

    .header__supertitle {
        @include overline-black-caps;
        color: $blue-50;

        @include sm-only {
            font-size: 0.625rem;
        }
    }

    .header__title {
        @include display-2-semibold;
        display: inline;
        margin: 0 16px 0 0;

        @include sm-only {
            font-size: 2rem;
            line-height: 1.125;
        }
    }

    .header__source {
        display: inline-block;
        @include body-1-regular;
        color: $blue-50;

        @include sm-only {
            font-size: 1rem;
            line-height: 1.5;
        }
    }

    .header__right {
        margin-bottom: 16px;
        padding-left: 24px;
        border-left: 1px solid $blue-20;
        align-self: start;

        @include sm-only {
            display: none;
        }
    }

    .sticky-nav-container {
        @include sm-only {
            border-top: 1px solid $blue-20;
        }
    }

    .chart-key-info {
        display: flex;
        flex-direction: column;
        padding-top: 16px;
        padding-bottom: 48px;
        @include sm-up {
            padding-top: 24px;
            padding-bottom: 80px;
        }
    }

    .full-width--border {
        border-bottom: 1px solid $blue-20;
    }

    .GrapherWithFallback {
        margin-bottom: 24px;
        @include sm-up {
            margin-bottom: 40px;
        }
        @include grid(12);

        figure[data-grapher-src],
        figure.GrapherWithFallback__fallback,
        figure.grapher-component {
            grid-column: span 12;
            margin: 0;

            // grapher sizing roughly follows the strategy used on standalone grapher pages,
            // outlined in site/css/chart.scss. some adjustments have been made.
            // in particular, on data pages, we want to make sure that the content
            // below the grapher chart is always partly visible.

            // landscape values – slightly adjusted from site/css/chart.scss
            $orientation-width: 680px;
            $orientation-height: 380px;
            $ideal-ratio: math.div($orientation-width, $orientation-height);

            min-height: 540px;

            // on small viewports, use the full available height
            // but leave space for the mobile header and some more space
            // to make content below the chart visible
            height: calc(100vh - $header-height-sm - 110px);

            // prevent the chart from growing too tall
            max-height: 150vw;

            // use ratio-preserving sizing but make sure the chart
            // doesn't cover the full viewport height
            @include sm-up {
                height: #{math.div(1, $ideal-ratio) * 100}vw;
                max-height: calc(100vh - $header-height-sm - 110px);
            }

            // on large viewports, use a fixed height
            @include lg-up {
                height: 680px;
                max-height: 680px;
            }
        }

        .GrapherWithFallback__fallback {
            display: flex;
            flex-direction: column;
            img {
                margin: auto;
            }
        }
    }

    .section-wrapper {
        padding-top: 32px;
        padding-bottom: 32px;
        @include sm-up {
            padding-top: 48px;
            padding-bottom: 48px;
        }

        &:not(:last-child) {
            border-bottom: 1px solid $blue-20;
        }
    }

    .related-research__title {
        @include datapage-section-title;
        @include lg-up {
            margin-bottom: 0px;
        }
    }

    .related-research__items {
        row-gap: 24px;
    }

    .related-research__item {
        &:hover h3 {
            text-decoration: underline;
        }
    }

    .related-article__title {
        @include h3-bold;
        margin: 0;
        color: $blue-90;
    }

    .related-article__authors {
        color: $blue-50;
    }

    .section-wrapper__related-charts {
        .related-charts {
            margin-bottom: 0;
        }

        figure[data-grapher-src],
        figure.grapher-component {
            height: $grapher-height;
        }
    }

    .related-charts__title {
        @include datapage-section-title;
    }

    .wp-code-snippet {
        margin-bottom: 16px;
    }

    .simple-markdown-text {
        @include body-3-medium;

        a {
            @include owid-link-60;
            color: inherit;
        }
    }
}

/*
CSS for A/B experiments

CSS patterns for hiding/showing elements based on visitor's assignment to an experiment.
When a visitor is assigned to an experimental arm, the html body is given a class corresponding
to the experiment+arm assignment: "{experimentId}--{armId}" (e.g. "exp-data-page-insight-links--treat1").

Then, we conditionally show/hide blocks of content when this class is present on the body.
Blocks with matching "{experimentId}--{armId}--show" are shown, while blocks with matching
"{experimentId}--{armId}--hide" are hidden.

By default when a user is NOT assigned to {armId}, blocks with "{experimentId}--{armId}--show"
are hidden, while blocks with "{experimentId}--{armId}--hide" are shown.
*/
$experiments: (
    exp-data-page-insight-btns-2: (
        control1,
        treat00,
        treat10,
        treat01,
        treat11,
        treat20,
        treat21,
    ),
);

@each $exp, $arms in $experiments {
    .#{$exp} {
        @each $a in $arms {
            // default state: all --show are hidden
            &--#{$a}--show {
                display: none;
            }

            // when arm is active, show the matching --show
            &--#{$a} &--#{$a}--show {
                display: block;

                &.grid {
                    display: grid;
                }
                margin-bottom: 24px;

                @include sm-up {
                    margin-bottom: 40px;
                }
            }

            // when arm is active, hide the matching --hide
            &--#{$a} &--#{$a}--hide {
                display: none;
            }
        }
    }
}

// styles specific to experiment exp-data-page-insight-btns-2
.exp-data-page-insight-btns-2 {
    $arms: map-get($experiments, exp-data-page-insight-btns-2);
    @each $a in $arms {
        &--#{$a} .DataPageContent {
            .chart-key-info {
                padding-bottom: 0;
                @include sm-up {
                    padding-bottom: 0;
                }
            }

            .insight-links__title {
                @include h2-bold;
                margin: 24px 0 16px;

                @include sm-up {
                    margin: 24px 0 24px;
                }
            }

            .insight-links__items,
            .insight-links__items--left {
                display: flex;
                flex-direction: column;
                gap: 16px;

                > * {
                    padding: 12px 24px;
                }

                .item__type {
                    @include h6-black-caps;

                    margin-bottom: 4px;
                    margin-top: 0;
                    color: $blue-30;
                }

                .item__title {
                    font-size: 16px;
                    margin: 0;
                }
                .item__icon {
                    margin-left: 0.5rem;
                }
            }

            .insight-links__items--left {
                > * {
                    text-align: left;
                }
            }
        }
    }
}
